<template>
    <div class="container">
        <!-- 按钮组件 -->
        <el-button type="primary" @click="handleClick">点击我</el-button>
        <!-- 输入框组件 -->
        <el-input v-model="username" placeholder="请输入用户名" style="margin-left: 30px;"></el-input>
        <!-- 表格组件 展示用户数据 -->
        <el-table :data="users" style="width: 100%; margin-top: 30px;">
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="company.name" label="公司"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 导入 axios

const users = ref([]); // 存储用户数据
const username = ref(''); // 存储用户名

const handleClick = async () => {
    try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
    } catch (error) {
        console.error('获取用户数据失败:', error);
    }
}

// 示例: 发送 POST 请求（新增用户）
const createUser = async () => {
    try {
        // post请求：新增用户（示例接口：JSONPlaceholder）
        const newUser = {
            name: '老张',
            email: 'laozhang@example.com'
        };
        // 发送POST请求到示例接口，新增用户

        const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);
        console.log('新增用户成功:', response.data);
    }catch(error){
        console.error('新增用户失败:', error);
    }
}
</script>